<template>
	<view class="login">
		<!-- 状态栏 -->
		<uni-status-bar bgcolor="#ffe933"></uni-status-bar>
		<view class="login-head">
			<!-- 引用背景图 -->
			<image src="../../static/common/loginhead.png" mode="widthFix" lazy-load></image>
			<view class="icon iconfont icon-guanbi" @tap="back"></view>
		</view>
		
		<!-- 账号登录 -->
		<view class="login-input padd">
			<!-- 账号密码登录 -->
			<template v-if="status===0">
				<view class="login-input-box">
					<input type="text" class="uni-input content padd-r" v-model="content" placeholder="昵称/手机号/邮箱"/>
					<text v-show="contentclose" class="icon iconfont icon-guanbi1 clear"  @tap="clearinput('content')"></text>
				</view>
				<view class="login-input-box">
					<input type="text" class="uni-input pwd" password v-model="pwd" placeholder="请输入密码"/>
					<text v-show="pwdclose" class="icon iconfont icon-guanbi1 clear-r" @tap="clearinput('pwd')"></text>
					<view class="login-input-pwd-r login-font-color">
						忘记密码？
					</view>
				</view>
			</template>
			
			<!-- 手机号码登录 -->
			<template v-if="status===1">
				<view class="login-input-box">
					<view class="ipone">
						+86
					</view>
					<input type="text" class="uni-input tel padd-r" v-model="tel" placeholder="手机号"/>
					<text v-show="telclose" class="icon iconfont icon-guanbi1 clear" @tap="clearinput('tel')"></text>
				</view>
				<view class="login-input-box">
					<input type="text" class="uni-input pwd" v-model="checknum" placeholder="请输入验证码"/>
					<text v-show="checknumclose" class="icon iconfont icon-guanbi1 clear-r" @tap="clearinput('yanzhengma')"></text>
					<view class="login-input-pwd-r login-font-color yanzhengma" @tap="getCheckNum">
						{{!codetime?'获取验证码':codetime + ' s'}}
					</view>
				</view>
			</template>
			
			<button type="primary" :loading="loading" class="user-set-btn" :class="{'user-set-btn-disable':disable}" @tap="submit">登录</button>
		</view>
		
		<!-- 登录状态切换 -->
		<view class="login-status uflex-a-j_c padd " @tap="changeStatus">
			{{status===0?'验证码登录': '账号密码登录'}}<view class="icon iconfont icon-jinru login-font-color"></view>
		</view>
		
		<!-- 第三方登录 -->
		<view class="other-login-title uflex-a-j_c padd login-font-color">
			第三方登录
		</view>
		<other-login></other-login>
		
		<!-- 协议 -->
		<view class="login-rule uflex-a-j_c login-font-color">
			注册即代表您同意<view class="login-rule-name">《xxx协议》</view>
		</view>
		
	</view>
</template>

<script>
	import uniStatusBar from '../../components/uni-status-bar/uni-status-bar.vue';
	import otherLogin from '../../components/home/other-login.vue';
	export default {
		data() {
			return {
				status: 1, // 0 表示账号密码登录 1表示手机号码登录
				disable: true,
				loading: false,
				content: '',
				contentclose: false,
				pwd: '',
				pwdclose: false,
				tel: '',
				telclose: false,
				checknum: '',
				checknumclose: false,
				codetime: 0
			}
		},
		watch:{
			content: {
				handler(newValue){
					this.OnBtnChange()
					this.changeInput()
				},
				deep: true
			},
			pwd: {
				handler(newValue){
					this.OnBtnChange()
					this.changeInput()
				},
				deep: true
			},
			tel: {
				handler(newValue){
					this.OnBtnChange()
					this.changeInput()
				},
				deep: true
			},
			checknum: {
				handler(newValue){
					this.OnBtnChange()
					this.changeInput()
				},
				deep: true
			}
		},
		methods: {
			// 获取验证码
			getCheckNum() {
				if(!this.changeTel()){return}
				if(this.codetime > 0) {
					uni.showToast({
						title:'不能重复获取',
						icon:"none"
					})
					return
				}
				// 请求服务器，发送验证码
				// 发送成功,开启倒计时
				this.codetime = 60
				let timeId = setInterval(()=> {
					this.codetime--
					if(this.codetime < 1){
						clearTimeout(timeId)
						this.codetime = 0
					}
				}, 1000);
			},
			// 初始化数据
			initdata() {
				this.content = ''
				this.pwd = ''
				this.tel = ''
				this.checknum = ''
				this.codetime = 0
			},
			// 改变按钮状态
			OnBtnChange() {
				if((this.content && this.pwd) || (this.tel && this.checknum)){
					this.disable = false 
					return
				}
				this.disable = true
			},
			// 返回上步
			back() {
				uni.navigateBack({
					delta:1
				})
			},
			// 提交
			submit() {
				
			},
			// 切换登录 
			changeStatus() {
				this.initdata()
				if(this.status === 0){
					this.status = 1
					return
				}
				this.status = 0
			}, 
			// 清空输入框
			clearinput(val) {
				switch(val){
					case 'tel': 
						this.tel = ''
						break;
					case 'yanzhengma':
						this.checknum = ''
						break;
					case 'content':
						this.content = ''
						break;
					case 'pwd':
						this.pwd = ''
						break;
				}
			},
			// 监听输入框值的改变
			changeInput(){
				if(this.content){
					this.contentclose = true
				}else{
					this.contentclose = false
				}
				if(this.pwd){
					this.pwdclose = true
				}else{
					this.pwdclose = false
				}
				if(this.tel){
					this.telclose = true
				}else{
					this.telclose = false
				}
				if(this.checknum){
					this.checknumclose = true
				}else{
					this.checknumclose = false
				}
			},
			// 监听获取验证码时手机是否有
			changeTel(){
				if(!this.tel){
					uni.showToast({
						title:'请输入手机号码',
						icon:"none"
					})
					return false
				}
				let telPatttern = /^1[3|4|5|7|8][0-9]\d{8}$/;
				if(!telPatttern.test(this.tel)){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:"none"
					})
					return false
				}
				return true
			}
		},
		components:{
			uniStatusBar,
			otherLogin
		}
	}
</script>

<style scoped lang="scss">
.login{
	.login-head{
		width: 100%;
		position: relative;
		> image{
			width: 100%;
			height: 100%;
		}
		> view{
			color:#332f0a;
			font-size: 40upx;
			font-weight: bold;
			position: fixed;
			top: 60upx;
			left: 30upx;
		}
	}
	.login-input{
		@import '../../common/css/form.scss';
		.login-input-box{
			position: relative;
			.content{
				border-bottom:1upx solid #f2f2f2;
				font-size: 30upx;
			}
			.padd-r{
				padding-right: 80upx;
			}
			.clear{
				color: rgba($color: #000000, $alpha: .2);
				position: absolute;
				top: 0;
				right: 0;
				width: 50upx;
				padding: 15upx 10upx;
				font-weight: 700;
			}
			.clear-r{
				color: rgba($color: #000000, $alpha: .2);
				position: absolute;
				top: 0;
				right: 180upx;
				width: 50upx;
				padding: 15upx 10upx;
				font-weight: 700;
			}
			> .pwd{
				border-bottom:1upx solid #f2f2f2;
				font-size: 30upx;
				padding-right: 250upx;
			}
			> .ipone{
				position: absolute;
				top: 0;
				left: 0;
				width: 50upx;
				padding: 15upx 30upx;
				font-weight: 700;
			}
			.tel{
				border-bottom:1upx solid #f2f2f2;
				font-size: 30upx;
				padding-left: 100upx;
			}
			.login-input-pwd-r{
				position: absolute;
				right: 0;
				bottom: 0;
				width:200upx;
				padding: 12upx 30upx;
				box-sizing: border-box;
				text-align: center;
			}
			.yanzhengma{
				background-color: #eee;
				border-radius: 10upx;
			}
		}
	}
	
	.padd{
		padding: 20upx 0;
	}
	.login-font-color{
		color:#bbb;
	}
	.other-login-title{
		position: relative;
		&:after{
			position: absolute;
			background-color: #EEEEEe;
			height: 1upx;
			width: 100upx;
			content: '';
			top: 50%;
			left: 25%;
		}
		&:before{
			position: absolute;
			background-color: #EEEEEe;
			height: 1upx;
			width: 100upx;
			content: '';
			top: 50%;
			right: 25%;
		}
	}
}
</style>
